


<template>
  <view class="store bg-page" :style="'min-height:'+$xyfun.xysys().windowHeight+'px'" v-if="!isEmpty">
    <view class="top p-t-50">
      <image class="bg p-t-20" src="/static/images/store-bg.png"/>
      <view class="user-info">
        <xy-user-card :role="role" />
      </view>
    </view>

    <view class="money m-30 p-30 bg-w">
      <view class="flex">
        <view>
          <view class="tc-999">可提现（元）</view>
          <view class="ts-40 m-t-15 tc-r">{{storeInfo.commission||0.00}}</view>
        </view>
        <view class="m-l-auto tc-999" @tap="$xyfun.to('/pages/user/withdraw/list?type=store')">
          提现记录
          <text class="xyicon icon-right"></text>
        </view>
      </view>
      <view class="flex m-t-40">
        <view class="col-3">
          <view class="tc-999">总佣金</view>
          <view class="ts-40 m-t-15">{{storeInfo.total_commission||0.00}}</view>
        </view>
        <view class="col-3">
          <view class="tc-999">已提现佣金</view>
          <view class="ts-40 m-t-15">{{storeInfo.withdrawn_commission||0.00}}</view>
        </view>
        <view class="col-3">
          <view class="tc-999">提现中佣金</view>
          <view class="ts-40 m-t-15">{{storeInfo.withdrawing_commission||0.00}}</view>
        </view>
      </view>
      <button class="withdraw-btn ts-30 lh-30 p-25 tc-w m-t-50 tm1b" @tap="$xyfun.to('/pages/user/withdraw/apply?type=store')">申请提现</button>
    </view>

    <view class="menu-list m-30 p-lr-30 p-t-50 flex bg-w">
      <view class="item col-2 flex m-b-50" v-for="(item,index) in menuList" :key="index" @tap="menuLink(index,item.url)">
        <image :src="'/static/images/distribution/menu3.png'" />
        <view class="m-l-20 lh-30">
          <view class="tb m-t-15">{{item.name}}</view>
          <view class="ts-26 m-t-10 tc-999">{{ index == 0 ? (storeInfo.two_child_num||0 + storeInfo.one_child_num||0)+'人'  : item.des}}</view>
        </view>
      </view>
    </view>

    <!--分享组件 -->
    <xy-share v-model="showShare" posterType="user" />

  </view>
</template>

<script>
import { mapState,mapActions } from 'vuex';
import xyUserCard from '@/components/xy-user/card';
import xyShare from '@/components/xy-share';
export default {
  components: {
    xyUserCard,
    xyShare
  },
  data() {
    return {

      role:'store',
      storeInfo:{},
      isEmpty:true,
      showShare:false,
      menuList:[
        {name:'账单报表',url:'/pages/user/bill?role=store',des:'佣金变更明细'},
      ],
    }
  },
  computed: {
    ...mapState(['common','user'])
  },
  async onLoad(options) {



    this.loadData();
  },
  onPullDownRefresh() {
    this.loadData();
  },
  methods: {

    ...mapActions('user',{'getStoreInfo':'getStoreInfo'}),

    loadData(){
      this.getStoreInfo().
      then(res => {
        uni.stopPullDownRefresh();
        if(res.status == 'normal'){
          this.isEmpty = false;
          this.storeInfo = res.data;
        }else{
          this.$xyfun.msg(res.msg);
        }
      });
    },

    menuLink(index,path){
      if(index == 1){
        this.showShare = true;
      }else{
        this.$xyfun.to(path);
      }
    }
  }
}
</script>

<style scoped lang="scss">
.store{
  .top{
    background: $theme1;
    position: relative;
    .bg{
      width: 100%;
      height: 300rpx;
    }
    .user-info{
      position: absolute;top: 30rpx;
    }
  }

  .money{
    .withdraw-btn{border-radius: 40rpx; width: 500rpx;}
  }

  .menu-list{
    image{width: 90rpx;height: 90rpx;}
  }

}
</style>
